/**
 * components/Row.js
 * Define your component using platform-independent primitives
 */
import React from "react";
import dismissKeyboard from "dismissKeyboard";

import {
  View, StyleSheet, SafeAreaView, TouchableOpacity,
} from "react-native";
import PropTypes from "prop-types";

import { Color } from "../../common/index";
import Loading from "./Loading";
import ErrorView from "./ErrorView";

const BasePage = props => {
  const {
    style,
    showIniting,
    showLoading,
    showError,
    showEmpty,
    showOverFlow,
    children,
    loadingTextContent,
    initingTextContent,
    onErrorPress,
    overFlowColor,
    hasInput = false,
  } = props;
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.container, style]}>
        {showIniting ? (
          <Loading loadingHint={initingTextContent} />
        ) : showError ? (
          <ErrorView onPress={onErrorPress} />
        ) : hasInput ? (
          <TouchableOpacity style={styles.flex} activeOpacity={1.0} onPress={() => dismissKeyboard()}>
            <View style={styles.flex}>{children}</View>
          </TouchableOpacity>
        ) : (
          children
        )}

        {showLoading && (
          <View style={styles.loadingContainer}>
            <Loading loadingHint={loadingTextContent} />
          </View>
        )}
        {showOverFlow && <View style={[styles.loadingContainer, { backgroundColor: overFlowColor }]} />}
      </View>
    </SafeAreaView>
  );
};

BasePage.propsTypes = {
  showIniting: PropTypes.bool,
  showLoading: PropTypes.bool,
  showError: PropTypes.bool,
  showOverFlow: PropTypes.bool,
  onErrorPress: PropTypes.func,
  showEmpty: PropTypes.bool,
  loadingTextContent: PropTypes.string,
  overFlowColor: PropTypes.string,
  initingTextContent: PropTypes.string,
};

BasePage.defaultProps = {
  showIniting: false,
  onErrorPress: () => {},
  showLoading: false,
  showError: false,
  showOverFlow: false,
  overFlowColor: Color.transparent,
  showEmpty: false,
  loadingTextContent: "",
  initingTextContent: "加载中……",
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.background_native,
  },
  flex: {
    flex: 1,
  },
  loadingContainer: {
    width: "100%",
    height: "100%",
    backgroundColor: Color.transparent,
    position: "absolute",
  },
});

export default BasePage;
